<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ translate('homePage') }}</div>
    <div class="flex-cb venue-list">
      <div
        v-for="(item, index) in list"
        :key="index"
        class="venue-item"
        @click="toVenue(item)"
      >
        <div class="flex-cb top-title">
          <div class="title">{{ item.name }}</div>
          <div class="link">{{ translate('enterVenue') }}<i class="el-icon-arrow-right" /></div>
        </div>
        <div class="bottom-info">
          <div
            class="base-bg-cover left-image"
            :style="'background-image: url(' + item.showLogo + ')'"
          />
          <div class="right-info">
            <div class="tel">{{ translate('telephone') }}：{{ item.telephone }}</div>
            <div class="address df">
              <div style="width: 48px">{{ translate('address') }}：</div>
              <div v-if="item.address && item.detailedAddress" class="content_w">
                {{ item.address + item.detailedAddress }}
              </div>
            </div>
            <div v-if="item.openTimeStart && item.openTimeEnd" class="open-time">
              {{ translate('businessHours') }}：{{ item.openTimeStart + " - " + item.openTimeEnd }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <Pagination
      :integrated="false"
      @current-change="currentChange"
    /> -->
  </div>
</template>

<script>
import { venueUrl, venueGrayUrl, venueListByUserId } from '@/api'
import { getToken } from '@/utils/auth'
// import Pagination from '@/components/paginations'
function findIndex(str, cha, num) {
  var x = str.indexOf(cha)
  for (var i = 0; i < num; i++) {
    x = str.indexOf(cha, x + 1)
    if (x === -1) break
  }
  return x
}
export default {
  name: 'Home',
  // components: {
  //   Pagination
  // },
  data() {
    return {
      list: [],
      pagination: {
        page: 1,
        rows: 10,
        firstQueryTime: new Date()
      },
      total: 0
    }
  },
  computed: {},
  created() {
    // console.log(window.location.href.slice(0, index + 2))
    this.getVenueList()
  },
  mounted() { },
  methods: {
    // 获取场馆列表
    getVenueList() {
      const { pagination } = this
      venueListByUserId({ pagination, param: { id: sessionStorage.getItem('userId') } }).then((res) => {
        if (res.errorCode !== '000000') return
        this.list = res.recordList
        this.total = res.totalCount
      })
    },
    // 页码切换
    currentChange(page) {
      this.pagination.page = page
      this.getVenueList()
    },
    toVenue(s) {
      const e = { ...s }
      e.describe = null
      e.detailedAddress = null
      e.editTime = null
      e.editor = null
      e.picture = null
      const shopId = localStorage.getItem('shopId') || ''
      const userId = sessionStorage.getItem('userId')
      const token = getToken()
      const str = window.location.href
      const index = findIndex(str, '_', 0)
      // console.log(str, index, str.slice(0, index))
      const grayFlag = str.indexOf('gray')
      if (grayFlag > -1) {
        window.open(str.slice(0, index + 1) + venueGrayUrl + '?venueId=' + e.id + '&shopId=' + shopId + '&userId=' + userId + '&name=' + e.name + '&token=' + token + '&venueInfo=' + JSON.stringify(e), '_blank')
      } else {
        window.open(str.slice(0, index + 1) + venueUrl + '?venueId=' + e.id + '&shopId=' + shopId + '&userId=' + userId + '&name=' + e.name + '&token=' + token + '&venueInfo=' + JSON.stringify(e), '_blank')
      }
      // window.open(str.slice(0, index + 1) + venueUrl + '?venueId=' + e.id + '&shopId=' + shopId + '&userId=' + userId + '&name=' + e.name + '&token=' + token + '&venueInfo=' + JSON.stringify(e), '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.venue-list {
  flex-wrap: wrap;
  &::after {
    content: "";
    width: calc((100% - 60px) / 3);
  }
  .venue-item {
    width: calc((100% - 60px) / 3);
    margin-bottom: 30px;
    box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    background-color: #fff;
    padding: 24px;
    box-sizing: border-box;
    cursor: pointer;
    transition: all 0.6s;
    &:hover {
      background-color: #435ebe;
      * {
        color: #fff !important;
      }
      .top-title {
        .title::before {
          background-color: #fff;
        }
      }
      // .left-image {
      //   transform: scale(1.1) rotate(360deg);
      // }
    }
    .top-title {
      margin-bottom: 20px;
      .title {
        font-size: 17px;
        font-weight: bold;
        position: relative;
        padding-left: 14px;
        &::before {
          content: "";
          display: inline-block;
          background-color: #435ebe;
          width: 4px;
          height: 100%;
          border-radius: 2px;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .link {
        font-size: 14px;
        color: #435ebe;
        i {
          font-weight: bold;
        }
      }
    }
    .bottom-info {
      min-height: 108px;
      display: flex;
      .left-image {
        width: 120px;
        margin-right: 20px;
        border-radius: 4px;
        flex-shrink: 0;
        transition: all 0.6s;
      }
      .right-info {
        display: flex;
        flex-direction: column;
        color: #333;
        font-size: 14px;
        line-height: 1.5em;
        .tel {
          margin-bottom: 14px;
          flex-shrink: 0;
        }
        .address {
          margin-bottom: 14px;
          flex: 1;
          .content_w {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }
        }
        .open-time {
          flex-shrink: 0;
        }
      }
    }
  }
}
</style>
